import React, { useState } from 'react'
import { useRouteMatch } from 'react-router-dom'
import { Input, Button, message } from 'antd'
import { addComment } from '@/api'
import dayjs from 'dayjs'
import { checkLogin } from '@/components/login'
import event from '@/utils/event'
import style from './index.module.scss'
export default () => {
  const match = useRouteMatch<{ id?: string }>()
  const id = Number(match.params.id)
  const [submitting, setSubmitting] = useState(false)
  const [text, setText] = useState('')
  const onSubmit = async () => {
    await checkLogin()
    if (text === '') return message.warning('请输入留言')
    setSubmitting(true)
    const { status, msg, data } = await addComment({ content: text, id })
    if (status) {
      setSubmitting(false)
      message.success('留言成功')
      event.emit('addBlogComment', {
        content: text,
        name: data.userName,
        creationTime: dayjs().valueOf(),
        commentId:data.commentId
      })
      setText('')
    } else {
      message.warning(msg)
    }
  }

  return (
    <>
      <div id="commentTop" className={style.hr} />
      <div className={style.row}>
        <div className={style.tip}>
          真诚感谢大佬的留言，驴弟会亲自查收每一条留言，并展示在文章底部。
        </div>
        <Input.TextArea
          value={text}
          autoSize={{ minRows: 2, maxRows: 6 }}
          onChange={(e) => setText(e.target.value)}
          className={style.textarea}
          placeholder="请输入留言"
        ></Input.TextArea>
        <div className={style.btn_row}>
          <Button
            className={style.btn}
            loading={submitting}
            onClick={onSubmit}
            type="primary"
            size="large"
          >
            提交留言
          </Button>
        </div>
      </div>
    </>
  )
}
